<template>
    <div>
    <div class="demo-upload-list" v-for="item in uploadList">
        <template v-if="item.status === 'finished'">
            <img :src="global+item.sourcePath">
        </template>
        <template v-else>
            <i-circle v-if="item.showProgress" :size="60" :percent="item.percentage" hide-info>
                <span class="demo-i-circle-inner" style="font-size:12px">{{item.percentage}}</span>
            </i-circle>
        </template>
    </div>
    <Upload
        ref="upload"
        :show-upload-list="false"
        :default-file-list="defaultList"
        :on-success="handleSuccess"
        :max-size="2048"
        :on-format-error="handleFormatError"
        :on-exceeded-size="handleMaxSize"
        :before-upload="handleBeforeUpload"
        multiple
        name="pic"
        type="drag"
        :headers="tokendata"
        :action="global+'/picture/material/batch/upload'"
        style="display: inline-block;width:58px;">
        <div style="width: 58px;height:58px;line-height: 58px;">
            <Icon type="camera" size="20"></Icon>
        </div>
    </Upload>
    <button @click="list">按钮</button>
    </div>
</template>
<script>
    import { mapState } from 'vuex';
    import global from '../../config/global'
    export default {
        data () {
            return {
                defaultList:"",
                uploadList: [],
                tokendata:"",
                global:"",
                cemeteryId:"",
                templateid:""
                
            }
        },
        computed: {
            ...mapState({ user: state => state.user }),
        },
        created(){
            this.ajax();
        },
        methods: {
            ajax(){
                this.defaultList=[
                    {
                        'sourcePath': '/static/images/templatePic/20170629/template_pic_1498744332914_ALBUM_IMG.png'
                    },
                    {
                        'sourcePath': '/static/images/templatePic/20170629/template_pic_1498744332973_ALBUM_IMG.png'
                    }
                ]
                this.global=global.host;
                this.tokendata={"Authorization":this.user.token_type+" "+this.user.access_token};
            },
            handleSuccess (res, file) {
                file.sourcePath=file.response.commPictureMaterialList[0].sourcePath
            }, 
            handleFormatError (file) {
                this.$Notice.warning({
                    title: '文件格式不正确',
                    desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '超出文件大小限制',
                    desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
                });
            },
            handleBeforeUpload () {
                const check = this.uploadList.length < 5;
                if (!check) {
                    this.$Notice.warning({
                        title: '最多只能上传 5 张图片。'
                    });
                }
                return check;
            },
            list(){
                this.uploadList = this.$refs.upload.fileList;
            }
        },
        mounted () {
            
        }
    }
</script>
<style>
    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>